<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <link rel="stylesheet" href="./form.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>表单验证</h2>
        </div>
        <form class="form" id="form">
            <div class="form_control" id="form_control">
                <label for="">用户名</label>
                <input type="text" placeholder="请输入用户名" id="username">
                <i class="el-icon-success"></i>
                <i class="el-icon-warning"></i>
                <small>错误信息</small>
            </div>
            <div class="form_control" id="form_control">
                <label for="">邮箱</label>
                <input type="text" placeholder="请输入邮箱" id="email">
                <i class="el-icon-success"></i>
                <i class="el-icon-warning"></i>
                <small>错误信息</small>
            </div>
            <div class="form_control" id="form_control">
                <label for="">密码</label>
                <input type="password" placeholder="请输入密码" id="password">
                <i class="el-icon-success"></i>
                <i class="el-icon-warning"></i>
                <small>错误信息</small>
            </div>
            <div class="form_control" id="form_control">
                <label for="">重复密码</label>
                <input type="password" placeholder="请再次输入密码" id="password2">
                <i class="el-icon-success"></i>
                <i class="el-icon-warning"></i>
                <small>错误信息</small>
            </div>
            <button type="submit">Submit</button>
        </form>
    </div>
    <script>
        const form = document.getElementById("form")
        const username = document.getElementById("username")
        const email = document.getElementById("email")
        const password = document.getElementById("password")
        const password2 = document.getElementById("password2")
        form.addEventListener('submit', (e) => {
            e.preventDefault();//防止页面提交
            checkInputs();
        })
        function checkInputs() {
            const usernameValue = username.value.trim();
            const emailValue = email.value.trim();
            const passwordValue = password.value.trim();
            const password2Value = password2.value.trim();
            //用户名验证
            if (usernameValue === "") {
                setError(username, "用户名不能为空");
            } else {
                setSuccess(username);
            }
            //邮箱验证
            if(emailValue === ""){
                setError(email, "邮箱不能为空");
            }else if(!valiEmail(emailValue)){
                setError(email, "邮箱格式不正确，请重新输入");
            }else{
                setSuccess(email);
            }
            //密码验证
            if (passwordValue === "") {
                setError(password, "密码不能为空");
            } else {
                setSuccess(password);
            }
            //重复验证密码
            if (password2Value === "") {
                setError(password2, "密码不能为空");
            }else if(passwordValue!==password2Value){
                setError(password2, "两次密码输入不一致，请重新输入");
            }else{    
                setSuccess(password2);
            }
        }
        function setError(element, msg) {
            const element_par = element.parentElement;
            const message = element_par.querySelector('small');
            message.textContent = msg;
            //error是验证错误的样式，success是验证成功的样式
            element_par.classList.remove('success')
            element_par.classList.add('error')
        }
        function setSuccess(element) {
            const element_par = element.parentElement;
            element_par.classList.remove('error')
            element_par.classList.add('success')
        }
        function valiEmail(email){
            const regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            return regEmail.test(email);
        }    
    </script>
</body>
</html>